<?php

use app\assets\BackendAsset as Asset;
use app\models\tableModel\AdminRoleModel;
use app\models\tableModel\PositionModel;

/* @var $this yii\web\View */

?>
<el-container class="index-wrapper">
    <el-header class="top-wrapper bg-white" :class="getTopClass" height="auto" ref="mainScrollShadow">
        <el-row :inline="true" class="button-container">
            <el-col :xs="12" :sm="12" :md="12" :lg="5">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>
                        <a @click="goToIndex"><i class="el-icon-location-outline"></i>&nbsp;首页</a>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item @dblclick.native="window.open(window.location.href)">
                        用户管理
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="19" class="text-right">
                <?php if (AdminRoleModel::checkAuth('create')) { ?>
                    <el-button class="" size="mini" type="success"
                               @click.native="goToCreate()">
                        新建
                    </el-button>
                <?php } ?>
                <el-dropdown size="mini" class="ml-15">
                    <el-button type="primary" size="mini">
                        更多操作
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <?php if (AdminRoleModel::checkAuth('open')) { ?>
                            <el-dropdown-item size="mini" @click.native="openItem(null)">
                                批量恢复
                            </el-dropdown-item>
                        <?php } ?>
                        <?php if (AdminRoleModel::checkAuth('disabled')) { ?>
                            <el-dropdown-item size="mini" @click.native="disabledItem(null)" divided>
                                批量禁用
                            </el-dropdown-item>
                        <?php } ?>
                        <?php if (AdminRoleModel::checkAuth('backend/positionData/push')) { ?>
                            <el-dropdown-item size="mini" @click.native="showPosition(null)" divided>
                                批量推荐
                            </el-dropdown-item>
                        <?php } ?>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-row>
    </el-header>
    <el-main class="content-wrapper transits bg-white">
        <div class="pv-10 ph-15" style="display: none;">
            <!-- 提醒 START -->
            <div class="tip">
                <el-collapse v-model="setting.activeNotice" accordion>
                    <el-collapse-item>
                        <template slot="title">
                            <i class="el-icon el-icon-info"></i>
                            &nbsp;&nbsp;
                            <span class="title">
                                温馨提示
                            </span>
                        </template>
                        <div class="content">
                            <p>
                                1、一些小提示: 我是提示；
                                一些小代码：<code>我是小代码</code>
                            </p>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <!-- 提醒 END -->
        </div>
        <!-- 查询 START -->
        <?= $this->render('../common/search.php', [
            'groupFields'      => 'searchForm.group',
            'groupOtherFields' => 'searchForm.groupOther',
            'baseFields'       => 'searchForm.base',
            'moreFields'       => 'searchForm.more',
            'export'           => 'searchForm.value',
            'submit'           => 'handleCurrentChange'
        ]); ?>
        <!-- 查询 START -->
        <!-- 主列表 表格 START -->
        <el-table :data="dataList" style="width: 100%" class="" @selection-change="handleSelectionChange"
                  @sort-change="handleSortChange">

            <el-table-column type="selection" width="55"></el-table-column>

            <el-table-column fixed prop="id" label="编号" width="100" sortable="custom">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="light" :content="scope.row.id"
                                placement="top-start">
                        <div class="text-more-ellipsis">
                            <span v-text="scope.row.id" class="pointer"></span>
                        </div>
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column fixed prop="user_name" label="用户名">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="light" :content="scope.row.user_name"
                                placement="top-start">
                        <div class="text-more-ellipsis">
                            <span v-text="scope.row.user_name" class="pointer"></span>
                        </div>
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column fixed prop="nick_name" label="昵称">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="light" :content="scope.row.nick_name"
                                placement="top-start">
                        <div class="text-more-ellipsis">
                            <span v-text="scope.row.nick_name" class="pointer"></span>
                        </div>
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column fixed prop="nick_name" label="昵称" width="80">
                <template slot-scope="scope">
                    <el-image class="thumb" :preview-src-list="[scope.row.avatar]" fit="cover"
                              :src="scope.row.avatar">

                    </el-image>
                </template>
            </el-table-column>

            <el-table-column fixed prop="phone" label="手机号">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="light" :content="scope.row.phone"
                                placement="top-start">
                        <div class="text-more-ellipsis">
                            <span v-text="scope.row.phone" class="pointer"></span>
                        </div>
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column fixed prop="sex_text" label="性别" width="50">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="light" :content="scope.row.sex_text"
                                placement="top-start">
                        <div class="text-more-ellipsis">
                            <span v-text="scope.row.sex_text" class="pointer"></span>
                        </div>
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column prop="update_time" label="修改时间" width="120" sortable="custom">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="light"
                                :content="scope.row.update_time_text"
                                placement="top-start">
                        <div class="text-more-ellipsis">
                            <span v-text="scope.row.update_time_text_s"
                                  class="pointer"></span>
                        </div>
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column prop="status_text" label="状态" width="80">
                <template slot-scope="scope">
                    <div class="text-more-ellipsis" v-if="setting.status_list">
                        <span v-if="scope.row.status == setting.status_list.disabled.value"
                              v-text="'已' + scope.row.status_text"
                              class="text-danger"></span>
                        <span v-else-if="scope.row.status == setting.status_list.open.value"
                              v-text="'已' + scope.row.status_text"
                              class="text-success"></span>
                        <span v-else v-text="'已' + scope.row.status_text"
                              class=""></span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="180" class-name="operate-column">
                <template slot-scope="scope">
                    <?php if (AdminRoleModel::checkAuth('edit')) { ?>
                        <el-button type="text" size="small"
                                   @click.native="goToUpdate(scope.row.id)">编辑
                        </el-button>
                    <?php } ?>
                    <?php if (AdminRoleModel::checkAuth('disabled')) { ?>
                        <el-button type="text text-danger" size="small"
                                   v-if="scope.row.status != setting.status_list.disabled.value"
                                   @click.native="disabledItem(scope.row.id)">
                            {{setting.status_list['disabled'].text}}
                        </el-button>
                    <?php } ?>
                    <?php if (AdminRoleModel::checkAuth('open')) { ?>
                        <el-button type="text text-success" size="small"
                                   v-else @click.native="openItem(scope.row.id)">
                            {{setting.status_list['open'].text}}
                        </el-button>
                    <?php } ?>
                    <el-dropdown>
                        <el-button type="text" size="small">
                            更多&nbsp;<i class="el-icon-arrow-down"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <div>
                                <?php if (AdminRoleModel::checkAuth('push', 'positionData', 'backend')) { ?>
                                    <el-dropdown-item @click.native="showPosition(scope.row.id)">
                                        推荐
                                    </el-dropdown-item>
                                <?php } ?>
                                <?php if (AdminRoleModel::checkAuth('change-password')) { ?>
                                    <el-dropdown-item @click.native="changePwd(scope.row.id)">
                                        修改密码
                                    </el-dropdown-item>
                                <?php } ?>
                            </div>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <!-- 主列表 表格 END -->

        <!-- 分页 START -->
        <div class="block pagination" v-if="dataTotal >= pageSize">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="page"
                           :page-sizes="[20, 50, 100, 200]"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="dataTotal">
            </el-pagination>
        </div>
        <!-- 分页 END -->

        <div class="clean-80px" v-else></div>
    </el-main>
</el-container>

<!--推荐到推荐位 最定义公共组件-->
<?= $this->render('../common/item-to-position.php', [
    'type' => PositionModel::getTypeUser()
]); ?>
<!--推荐到推荐位 最定义公共组件-->

<?= Asset::addCss($this, '/css/backend/user-index.css'); ?>

<?= Asset::addScript($this, '/js/backend/user-index.js'); ?>
<?= $this->registerJs('instance = new app();'); ?>
